<template>
    <div>
        <Dog v-for="(obj, index) in arr" :key="index" :imgurl="obj.dogImgUrl" :dogname="obj.dogName" @choose="dogNa"></Dog>
        <p>显示喜欢的狗:</p>
        <ul>
            <li v-for="(item, index) in loveArr" :key="index">{{ item }}</li>
        </ul>
    </div>
</template>

<script>
import Dog from '@/components/卖狗'
export default {
    data() {
        return {
            // 1. 准备数据
            loveArr: [],
            arr: [
                {
                    dogImgUrl: require('./assets/dog1.webp'),
                    dogName: '金祺然',
                },
                {
                    dogImgUrl: require('./assets/dog2.webp'),
                    dogName: '边牧',
                },
                {
                    dogImgUrl: require('./assets/dog3.webp'),
                    dogName: '金毛',
                },
                {
                    dogImgUrl: require('./assets/dog4.webp'),
                    dogName: '柴狗',
                },
            ],
        }
    },
    methods: {
        dogNa(dog) {
            this.loveArr.push(dog)
        },
    },
    components: {
        Dog,
    },
}
</script>
